<template>
	<view class="">
		<view class="title">
			<alltitleVue :title="title" :url="url" />
		</view>
		

		<view class="bg" :style="{ 'background-image': `url(${bg})` }">
			
			<view class="map-box" >
				<image :src="titleImg" mode=""></image>
				<view class="map">
					
					<map @click="dianji" style="width: 650rpx; height: 350rpx;" :latitude="latitude" :longitude="longitude" :markers="covers">
					</map>
				</view>
				
			</view>
		</view>
	</view>

</template>

<script>
	import config from "../../utils/config";
	export default {
		onReady() {
			// 在页面 ready 时初始化高德地图

		},
		data() {
			return {
				bg: config.ossHost + '2024/12/29/738f920c943c45ed9ae1c26bace4ae8c.jpg',
				titleImg:config.ossHost + '2024/12/29/0e39e9ea7dce4e72817917ef9a266f73.png',
				mapImg:config.ossHost + '2024/12/29/09c944ae03a24bcfa0f58bf504267a14.png',
				
				title: "",
				id: 0, // 使用 marker点击事件 需要填写id

				latitude: 30.680784,
				longitude: 104.043792,
				covers: [{
					latitude: 30.680784,
					longitude: 104.043792,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 30.680784,
					longitude: 104.043792,
					iconPath: '../../../static/location.png'
				}]
			}
		},
		onLoad() {},
		methods: {
			dianji() {
				uni.openLocation({
					latitude: 30.680784, // 纬度
					longitude: 104.043792, // 经度
					name: '西南中医医院', // 地址名称
					address: '成都市西南中医医院', // 详细地址
					scale: 18 // 地图缩放级别，0-20，值越大地图越详细
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.title{
		
		position:fixed;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
	}
	
	.bg{
		width: 100vw;
		height: 1990rpx;
		padding-top: 10rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		.map-box{
			position: relative;
			margin-top: 650rpx;
			image{
				        position: absolute;
				        top: -20rpx;
				        z-index: 10;
				        left: 50%;
				        margin-left: -150rpx;
				        width: 300rpx;
				        height: 60rpx;
			}
			.map{
				
				width: 648rpx;
				height: 348rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				
				border: 1rpx solid;
				border-radius: 16rpx;
				overflow: hidden;
				
			}
		}
		
	}
</style>